<template>
  <div>
    <el-dialog class="form-dialog" :close-on-click-modal="false" width="800px" :title="title" :visible.sync="visible">
      <el-form ref="form" :rules="rules" label-width="100px" :model="form">
        <el-form-item label="反馈内容" prop="feedbackInfo">
          <el-input v-model="form.feedbackInfo" type="textarea" placeholder="反馈内容，至多 200 字" />
        </el-form-item>

        <el-form-item label="反馈附件" prop="feedbackStuff">
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="actionUrl"
            :data="updateData"
            :accept="accept"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :headers="uploadHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :before-remove="beforeRemove"
            :multiple="false"
            :limit="5"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary" @click="handleMedia('image')">上传</el-button>
            <div slot="tip" class="el-upload__tip">图片（image）: 2M，支持PNG\JPEG\JPG\GIF格式</div>
            <div slot="tip" class="el-upload__tip">视频（video）：10MB，支持MP4格式</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="附件ID">
          <div v-for="mediaId in mediaList">{{ mediaId }}</div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  name: 'FormDialog',
  data() {
    return {
      loading: false,
      visible: false,
      appId: '',
      title: '',
      mode: '',
      options: [],
      optionValue: [],
      reject: null,
      fileList: [],
      mediaList: [],
      accept: 'image/gif,image/jpeg,image/png,image/gif,video/mp4',
      acceptList: ['image/gif', 'image/jpeg', 'image/png', 'image/gif', 'video/mp4'],
      uploadHeaders: {
        'X-KDADMIN-TOKEN': getToken()
      },
      resolve: null,
      permId: null,
      mediaType: 'image',
      actionUrl: process.env.VUE_APP_BASE_API + '/wx/kd/media/upload',
      form: {
        feedbackInfo: null,
        feedbackStuff: null
      },
      rules: {
        versionNum: [{
          required: true,
          message: '请输入版本号',
          trigger: 'blur'
        }],
        optionValue: [{
          required: true,
          message: '请选择模板类型',
          trigger: 'blur'
        }],
        templateId: [{
          required: true,
          message: '请选择模板id',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    updateData() {
      return {
        appId: this.appId,
        mediaType: this.form.mediaType
      }
    }
  },
  mounted() {
    this.uploadHeaders = {
      'X-KDADMIN-TOKEN': getToken()
    }
  },
  methods: {
    defaultForm() {
      return {
        feedbackStuff: '',
        feedbackInfo: '',
        mediaType: 'image'
      }
    },

    handleChange() {

    },

    open(appId) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.appId = appId
        this.visible = true
        this.mode = 'add'
        this.title = '提交审核'
        this.fileList = []
        this.mediaList = []
        this.$refs.upload && this.$refs.upload.clearFiles()
        this.form = this.defaultForm()
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
      this.$refs.form.resetFields()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      let index = 0
      for (var i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].name === file.name) {
          index = i
          break
        }
      }
      this.mediaList = this.mediaList.slice(index, index + 1)
    },
    handleMedia(mediaType) {
      this.mediaType = mediaType
      console.info('mediaType', mediaType)
    },
    handleConfirm() {
      const feedbackInfo = this.form.feedbackInfo
      const feedbackStuff = this.mediaList.join('|')
      this.resolve && this.resolve({ feedbackInfo: feedbackInfo, feedbackStuff: feedbackStuff })
      this.close()
    },
    handleAvatarSuccess(res, file, fileList) {
      console.info('this.fileList', this.fileList)
      if (res.code === 0) {
        this.mediaList.push(res.data.mediaId)
      } else {
        let index = 0
        for (var i = 0; i < fileList.length; i++) {
          if (fileList[i].name === file.name) {
            index = i
            break
          }
        }
        fileList.splice(index, index + 1)
        console.info(fileList)
        this.$message.error(res.msg)
      }
    },
    beforeAvatarUpload(file) {
      console.info('getToken()', getToken())
      console.info(file.type)
      this.uploadHeaders = {
        'X-KDADMIN-TOKEN': getToken()
      }
      return true
    }
  }
}
</script>

